<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>信用卡</title>

    <!-- styles here -->
    <link rel="shortcut icon" href="../favicon.ico">
    <link rel="stylesheet" href="../css/Public_CSS.css">
    <link rel="stylesheet" href="../css/swiper.min.css">
    <link rel="stylesheet" href="../css/mui.min.css">
    <link rel="stylesheet" href="../css/style.css">
</head>

<body>
    <div id="app" class="credit-page">
        <div class="banner">
            <div class="swiper-wrapper">
                <img v-for="banner in banners" class="swiper-slide" :src="banner.bannerImg">
            </div>
        </div>
        <div class="info-wrap">
            <p>
                <i></i>恭喜尾号
                <span id="num1"></span>的用户成功申请
                <span id="bank1"></span>信用卡</p>
            <p>
                <i></i>恭喜尾号
                <span id="num2"></span>的用户成功申请
                <span id="bank2"></span>信用卡</p>
            <p>
                <i></i>恭喜尾号
                <span id="num3"></span>的用户成功申请
                <span id="bank3"></span>信用卡</p>
            <p>
                <i></i>恭喜尾号
                <span id="num4"></span>的用户成功申请
                <span id="bank4"></span>信用卡</p>
        </div>
        <div class="scroll-y">
            <div class="normal-card">
                <div class="ptitle">
                    <span></span>
                    <h1>普通卡免费</h1>
                </div>
                <div class="cards">
                    <div class="scroll">
                        <ul>
                            <li v-for="card in topCard">
                                <a :href="card.cardUrl">
                                    <img :src="card.cardImage" :alt="card.cardName">
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="more">
                        <a href="./allCard.html">更多
                            <span></span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="platinum-card">
                <div class="ptitle">
                    <span></span>
                    <h1>大额白金卡</h1>
                </div>
                <ul>
                    <li>
                        <a href="./bespeak.html">
                            <img src="../img/credit/yybk.png" alt="预约办卡">
                        </a>
                    </li>
                    <li>
                        <a href="./credit-strategy1.html">
                            <img src="../img/credit/xykgl.png" alt="信用卡攻略">
                        </a>
                    </li>
                    <li>
                        <a href="./progress.html">
                            <img src="../img/credit/jdcx.png" alt="进度查询">
                        </a>
                    </li>
                    <li>
                        <a href="assess.html">
                            <img src="../img/credit/bkpg.png" alt="办卡评估">
                        </a>
                    </li>
                    <li>
                        <a href="./recommend.html">
                            <img src="../img/credit/tjyl.png" alt="推荐有礼">
                        </a>
                    </li>
                    <li>
                        <a href="smart-select.html">
                            <img src="../img/credit/bwxk.png" alt="帮我选卡">
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- scripts here -->
    <script type="text/javascript" src="../js/main.js"></script>
    <script src="../js/common.js" type="text/javascript"></script>
    <script src="../js/jquery.min.js" type="text/javascript"></script>
    <script src="../js/vue.min.js" type="text/javascript"></script>
    <script src="../../public/js/loan/mui.min.js" type="text/javascript"></script>
    <script src="../js/swiper.jquery.min.js" type="text/javascript"></script>
    <script>
        var appId = GetQueryString("appId");
        $(function () {
            if (appId == null || appId == undefined) {
                mui.alert("环境异常");
                return;
            }
            vm.loadInfo();
            sessionStorage.setItem("card", null);
            sessionStorage.setItem("company", null);
            sessionStorage.setItem("edu", null);
            sessionStorage.setItem("house", null);
            sessionStorage.setItem("social", null);
            sessionStorage.setItem("work", null);
            sessionStorage.setItem("workProve", null);
            sessionStorage.removeItem("tags1");
            sessionStorage.removeItem("tags2");
            sessionStorage.removeItem("tags3");
            window.sessionStorage.setItem("appId", appId);
            vm.loadBanner();
            vm.loadCards();
            setInterval(vm.handelData(), 10000);
        });
        var vm = new Vue({
            el: "#app",
            data: {
                topCard: [],
                info: {},
                banners: [{
                    bannerImg: '../img/banner/xyk_banner1.png'
                }, {
                    bannerImg: '../img/banner/xyk_banner2.png'
                }]
            },
            methods: {
                loadCards: function () {
                    $.ajax({
                        url: "/thmlfApi/avs/yb/topCard?appId=" + appId,
                        dataType: "JSON",
                        success: function (r) {
                            if (r.code == 200) {
                                vm.topCard = r.result;
                                console.log("url", vm.topCard);
                                Vue.nextTick(rWidth);
                            } else
                                alert(r.message);
                        },
                        error: function (e) {
                            console.log("request error", e);
                            mui.alert("请求失败，请稍后重试")
                        }
                    });
                },
                handelData: function () {
                    var Num1 = "",
                        Num2 = "",
                        Num3 = "";
                    for (var i = 0; i < 4; i++) {
                        Num1 += Math.floor(Math.random() * 10);
                        Num2 += Math.floor(Math.random() * 10);
                        Num3 += Math.floor(Math.random() * 10);
                    }
                    var banks = ["招商银行", "工商银行", "浦发银行", "建设银行", "兴业银行", "中信银行", "交通银行", "光大银行", "中国银行",
                        "华夏银行", "民生银行"
                    ];
                    document.getElementById("bank1").innerText = banks[Math.floor(Math.random() * 10)];
                    document.getElementById("num1").innerText = Num1;
                    document.getElementById("bank2").innerText = banks[Math.floor(Math.random() * 10)];
                    document.getElementById("num2").innerText = Num2;
                    document.getElementById("bank3").innerText = banks[Math.floor(Math.random() * 10)];
                    document.getElementById("num3").innerText = Num3;
                    document.getElementById("bank4").innerText = document.getElementById("bank1").innerText;
                    document.getElementById("num4").innerText = document.getElementById("num1").innerText;
                },
                loadInfo: function () {
                    $.ajax({
                        url: '/thmlfApi/avs/yb/info?appId=' + appId,
                        success: function (r) {
                            if (r.code == 200) {
                                sessionStorage.setItem("infoName", r.result.infoName);
                                sessionStorage.setItem("infoTel", r.result.infoTel);
                                vm.info = r.result;
                            } else
                                alert(r.message);
                        }
                    });
                },
                tel: function () {
                    if (mui.os.ios == true || mui.os.wechat == true) {
                        window.location.href = 'tel:' + vm.info.infoTel;
                    } else {
                        mui.alert('咨询方式:' + vm.info.infoTel);
                    }
                },
                loadBanner: function () {
                    mui.ajax("http://www.028wkf.cn/app/banner/tag?appId=" + appId + "&tag=card_top", {
                        dataType: 'json',
                        type: 'get',
                        success: function (data) {
                            if (data.code == 200)
                                if (data.result instanceof Array && data.result.length > 0)
                                    vm.banners = data.result;
                            Vue.nextTick(rSwipe);
                        },
                        error: function () {},
                    });
                }
            }
        });

        function rWidth() {
            var count = $(".scroll").children().children().length;
            $(".scroll").children().get(0).style.width = "calc(" + count * 40 + "% + " + 16 * count + "px)";
        }

        function rSwipe() {
            var img = $(".banner > .swiper-wrapper > img");
            var bannerHeight = img.height();
            scrollHeight = "calc(100% - 36px - " + bannerHeight + "px";
            $(".scroll-y").get(0).style = "height:" + scrollHeight;
            var mySwiper = new Swiper('.banner', {
                loop: false,
                autoplay: 5000,
                observer: true, //修改swiper自己或子元素时，自动初始化swiper
                observeParents: true //修改swiper的父元素时，自动初始化swiper
                // 如果需要分页器
                // pagination: '.swiper-pagination',
            });
            setTimeout(function () {
                img.each(function () {
                    $(this).height(bannerHeight);
                })
            }, 0);
        }
    </script>

</body>

</html>